<template>
  <div class="screen-container" :style="containerStyle">
    <header class="screen-header">
      <div>
        <img :src="borderSrc" alt="" />
      </div>
      <div class="logo">
        <!-- <img src="/static/img/logo_dark.png" alt="" /> -->
      </div>
      <div class="title">电商数据平台</div>
      <div class="title-right">
        <img :src="themeSrc" class="qiehuan" @click="changeTheme" />
        <span class="datetime">2022-02-10</span>
      </div>
    </header>
    <div class="screen-body">
      <section class="screen-left">
        <div id="left-top" :class="fullScreenStatus.trend ? 'fullscreen' : ''">
          <trend ref="trend"></trend>
          <div class="resize">
            <span
              :class="['iconfont', fullScreenStatus.trend ? 'icon-compress-alt' : 'icon-expand-alt']"
              @click="changeSize('trend')"
            ></span>
          </div>
        </div>
        <div id="left-bottom" :class="fullScreenStatus.seller ? 'fullscreen' : ''">
          <seller ref="seller"></seller>
          <div class="resize">
            <span
              :class="['iconfont', fullScreenStatus.seller ? 'icon-compress-alt' : 'icon-expand-alt']"
              @click="changeSize('seller')"
            ></span>
          </div>
        </div>
      </section>
      <section class="screen-middle">
        <div id="middle-top" :class="fullScreenStatus.map ? 'fullscreen' : ''">
          <single-map ref="map"></single-map>
          <div class="resize">
            <span
              :class="['iconfont', fullScreenStatus.map ? 'icon-compress-alt' : 'icon-expand-alt']"
              @click="changeSize('map')"
            ></span>
          </div>
        </div>
        <div id="middle-bottom" :class="fullScreenStatus.rank ? 'fullscreen' : ''">
          <rank ref="rank"></rank>
          <div class="resize">
            <span
              :class="['iconfont', fullScreenStatus.rank ? 'icon-compress-alt' : 'icon-expand-alt']"
              @click="changeSize('rank')"
            ></span>
          </div>
        </div>
      </section>
      <section class="screen-right">
        <div id="right-top" :class="fullScreenStatus.hot ? 'fullscreen' : ''">
          <hot ref="hot"></hot>
          <div class="resize">
            <span
              :class="['iconfont', fullScreenStatus.hot ? 'icon-compress-alt' : 'icon-expand-alt']"
              @click="changeSize('hot')"
            ></span>
          </div>
        </div>
        <div id="right-bottom" :class="fullScreenStatus.stock ? 'fullscreen' : ''">
          <stock ref="stock"></stock>
          <div class="resize">
            <span
              :class="['iconfont', fullScreenStatus.stock ? 'icon-compress-alt' : 'icon-expand-alt']"
              @click="changeSize('stock')"
            ></span>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import Hot from '@/components/Hot'
import Map from '@/components/Map'
import Rank from '@/components/Rank'
import Seller from '@/components/Seller'
import Stock from '@/components/Stock'
import Trend from '@/components/Trend'
import { mapState } from 'vuex'
import { getThemeValue } from '@/utils/theme_utils.js'

export default {
  components: {
    hot: Hot,
    'single-map': Map, // 在模板里始终采用 小写+横线 的形式使用组件。以后都这样做！
    rank: Rank,
    seller: Seller,
    stock: Stock,
    Trend, // 偷懒的做法。在模板里依然用 小写！
  },
  data() {
    return {
      fullScreenStatus: {
        trend: false,
        seller: false,
        map: false,
        rank: false,
        hot: false,
        stock: false,
      },
    }
  },
  computed: {
    ...mapState(['theme']),
    borderSrc() {
      return '/static/img/' + getThemeValue(this.theme).headerBorderSrc
    },
    logoSrc() {
      return '/static/img/' + getThemeValue(this.theme).logoSrc
    },
    themeSrc() {
      return '/static/img/' + getThemeValue(this.theme).themeSrc
    },
    containerStyle() {
      return {
        backgroundColor: getThemeValue(this.theme).backgroundColor,
        color: getThemeValue(this.theme).titleColor,
      }
    },
  },
  created() {
    this.$socket.registerCallBack('fullScreen', this.recvData)
  },
  mounted() {},
  destroyed() {
    this.$socket.unRegisterCallBack('fullScreen')
  },
  methods: {
    changeTheme() {
      this.$store.commit('changeTheme')
    },
    recvData(data) {
      // 把所有的图表置为不是全屏
      Object.keys(this.fullScreenStatus).forEach((item) => {
        this.fullScreenStatus[item] = false
      })
      // 把目标图表置为目标状态
      this.fullScreenStatus[data.chartName] = data.value
      // 更新所有图表
      Object.keys(this.fullScreenStatus).forEach((item) => {
        this.$nextTick(() => {
          this.$refs[item].screenAdapter()
        })
      })
    },
    changeSize(chartName) {
      // 先得到目标状态
      const targetValue = !this.fullScreenStatus[chartName]

      this.$socket.send({
        action: 'fullScreen',
        socketType: 'fullScreen',
        chartName: chartName,
        value: targetValue,
      })
    },
  },
}
</script>

<style lang="less" scoped>
.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
}
.screen-header {
  width: 100%;
  height: 64px;
  font-size: 20px;
  position: relative;
  > div {
    img {
      width: 100%;
    }
  }
  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20px;
    transform: translate(-50%, -50%);
  }
  .title-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-80%);
  }
  .qiehuan {
    width: 28px;
    height: 21px;
    cursor: pointer;
  }
  .datetime {
    font-size: 15px;
    margin-left: 10px;
  }
  .logo {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-80%);
    img {
      height: 35px;
      width: 128px;
    }
  }
}
.screen-body {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 10px;
  .screen-left {
    height: 100%;
    width: 27.6%;
    #left-top {
      height: 53%;
      position: relative;
    }
    #left-bottom {
      height: 31%;
      margin-top: 25px;
      position: relative;
    }
  }
  .screen-middle {
    height: 100%;
    width: 41.5%;
    margin-left: 1.6%;
    margin-right: 1.6%;
    #middle-top {
      width: 100%;
      height: 56%;
      position: relative;
    }
    #middle-bottom {
      margin-top: 25px;
      width: 100%;
      height: 28%;
      position: relative;
    }
  }
  .screen-right {
    height: 100%;
    width: 27.6%;
    #right-top {
      height: 46%;
      position: relative;
    }
    #right-bottom {
      height: 38%;
      margin-top: 25px;
      position: relative;
    }
  }
}
.resize {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}
.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
}
</style>
